<template>
  <div class="container">
    <div>已完成{{ isComplete }} / 全部 {{ list.length }}</div>
    <button v-if="isComplete > 0" class="btn" @click="clear">清除已完成</button>
  </div>
</template>
<script>
import { defineComponent, ref, computed } from "vue";

export default defineComponent({
  name: "",
  emits: ["clear"],
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  setup(props, ctc) {
    let isComplete = computed(() => {
      let arr = props.list.filter((item) => {
        return item.complete == true;
      });
      return arr.length;
    });
    console.log(props.list);
    console.log(isComplete);
    // let all = ref(3);
    let clear = () => {
      let arr = props.list.filter((item) => {
        return item.complete == false;
      });
      // 触发父组件中的clear事件
      ctc.emit("clear", arr);
      // console.log("clear");
    };
    return {
      isComplete,
      // all,
      clear,
    };
  },
});
</script>
<style scoped lang='scss'>
.container {
  display: flex;
  align-items: center;
  .btn {
    margin-left: 10px;
  }
}
</style>